<template>
  <div class="secret-container">
    <template v-if="dataType === 'field'">
      <!-- 附件字段 -->
      <template v-if="showLookBtn">
        <div>******</div>
        <div class="button-text ml-10" @click="handleShow()">查看</div>
      </template>
      <slot v-else name="field" />
    </template>
    <template v-else>
      <!-- 普通字段 -->
      <template v-if="originText">
        <ToolTip v-if="isToolTip" :content="showText" />
        <div v-else>{{ showText }}</div>
        <div v-if="showLookBtn" class="button-text ml-10" @click="handleShow()">查看</div>
      </template>
      <div v-else>--</div>
    </template>

  </div>
</template>

<script>
import { aesDecode } from '@/utils/string';
import { createSystemLog } from '@/api/setting';
import { mapState } from 'vuex';

export default {
  name: 'SecretText',
  props: {
    originText: {
      type: String,
      default: ''
    },
    openEncryption: { // 是否开启加密
      type: Boolean,
      default: true
    },
    isToolTip: {
      type: Boolean,
      default: true
    },
    logText: {
      type: String,
      default: ''
    },
    format: {
      type: Function,
      default: null
    },
    dataType: {
      type: String,
      default: '' // field:附件字段
    },
    showPlainText: {
      type: Boolean,
      default: false
    },
    operationModularType: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      showComplete: false
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo
    }),
    showLookBtn() {
      return !this.showComplete && !this.showPlainText;
    },
    plaintext() {
      const KEY = 'swXCB15WQa==FBGC';
      const originText = this.originText.toString();
      return aesDecode(originText, KEY);
    },
    showText() {
      if (this.showComplete || this.showPlainText) {
        return this.format ? this.format(this.plaintext) : this.plaintext;
      }
      if (!this.plaintext) return '******';

      const str = this.plaintext.toString().trim();
      const len = str.length;
      return `${str[0] || '*'}****${str[len - 1] || '*'}`;
    }
  },
  methods: {
    handleShow() {
      if (!this.operationModularType) {
        this.$message.error('没有找到对应模块');
        return;
      }
      this.showComplete = true;
      const content = `查看了${this.logText}`;

      createSystemLog({ content, operationModularType: this.operationModularType });
    }
  }
};
</script>
<style lang="scss" scoped>
.secret-container {
  display: flex;
}
.ml-10 {
  margin-left: 10px;
}
</style>
